<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>day07</title>
    <style>
        body{
            text-align: center;
            font-size: 30px;
            
                       
        }
    </style>
</head>
<body>
    <div id='section1'>10年后</div> 
    <div id='section2'>5年后</div> 
    <div id='section3'>1年后</div>
    
</body>
</html>

<script>
// 赋值
    var section1=document.querySelector("#section1")
    var section2=document.querySelector("#section2")
    var section3=document.querySelector("#section3")

    section1.onclick=function(){
        section1.style.color= new myClass('red').color
        alert("点我就告诉你!")
    }
    section2.onclick=function(){
        section2.style.color= new myClass('green').color  
        alert("点我就告诉你!")
    }
    section3.onclick=function(){
        section3.style.color= new myClass('yellow').color  
        alert("点我就告诉你!")
    }

    // 绑定事件函数
    class myClass{
        constructor(color){
            this.color=color
        }
    }
 

 




</script>